<template>
	<div>
		<el-container style="height: 700px;">
			<el-main>
				<!-- <el-row style="background-color: Transparent;height:20px"></el-row> -->
				<div style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);">
					<el-row style="background-color: #FFFFFF;height: 10px;border-radius: 5px 5px 0 0;"></el-row>
					<el-row class="title">
						<el-col class="lv" :span="3">
							<i class="el-icon-location-information"></i>挂号预约/&nbsp;发票管理/&nbsp;
						</el-col>
						<el-col :span="2" style="color: #303133;font-size: 13px;text-align: left;">
							发票审查
						</el-col>
					</el-row>
					<el-row class="title" style="border-radius: 0 0 5px 5px ;">
						<el-col class="tcon" :span="3" style="font-size: 25px;text-align: center;">发票审查</el-col>
					</el-row>
				</div>

				<el-row style="background-color: Transparent;height:20px"></el-row>
				<div style="border-radius: 5px 5px 5px 5px;background-color: #FFFFFF;border: solid 1px #DCDFE6;">
					<el-row style="height: 20px;border-radius: 5px 5px 0 0;"></el-row>
					<el-row style="height: 5px;"></el-row>
					<div style="vertical-align:middle;padding: 20px;background-color: white;text-align: left;">
						<p style="height: 60px;">统计时间从 ：
							<el-date-picker v-model="value1" type="daterange" range-separator="到"
								start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyyMMdd">
							</el-date-picker>
							<el-button style="float: right;" type="primary" @click="onSubmit" icon="el-icon-search">查询
							</el-button>
						</p>
					</div>
					<!-- 表格行高设置格式
:cell-style="{padding:'5px 0',textAlign:'center'}" :header-cell-style="{textAlign:'center'}" -->
					<el-row>
						<el-col :span="3"
							style="text-align: right; font-size: 16px; font-family: 'arial black';font-size: large;">
							发票信息：
						</el-col>
						<!-- 	<el-col :span="19" style="text-align: right;font-size: 17px;color: #F56C6C;font-weight: bold;">
							总价：￥ <el-tag   style="border:solid 1px white ;background-color: white;color: black; font-size: 17px;">{{sum_price_view}}</el-tag></el-col> -->
					</el-row>
					<el-row style="height: 5px;"></el-row>
					<el-row>
						<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" height="383"
							:row-style="{height:'10px'}" ref="multipleTable" stripe border tooltip-effect="dark"
							style="width: 92%" :cell-style="{textAlign:'center'}"
							:header-cell-style="{textAlign: 'center'}" @selection-change="handleSelectionChange">
							<el-table-column prop="invoice_id" label="发票号">
							</el-table-column>
							<el-table-column prop="no" label="病历号">
							</el-table-column>
							<el-table-column prop="name" label="患者姓名">
							</el-table-column>
							<el-table-column prop="date" label="看诊日期" show-overflow-tooltip>
							</el-table-column>
							<el-table-column prop="invoice_price" label="发票金额">
							</el-table-column>
							<el-table-column prop="money" label="支付金额">
							</el-table-column>
						</el-table>
					</el-row>
					<el-row style="height: 20px;"></el-row>
					<el-row>
						<el-col :span="23">
							<div style="padding-right: 24px;">
								<el-pagination background style="text-align: center;" @size-change="handleSizeChange"
									@current-change="handleCurrentChange" :current-page="currentPage"
									:page-size="pageSize" layout="total,prev, pager, next, jumper"
									:total="tableData.length">
								</el-pagination>
							</div>
						</el-col>

					</el-row>
					<el-row style="height: 20px;"></el-row>
				</div>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	import {
		getRequest
	} from '@/utils/api'
	export default {
		mounted: function() {
			let url = "/fpsc";
			let _this = this;
			getRequest(url).then(resp => {
				if (resp.status == 200) {
					//alert(resp.data);
					_this.fpsc = resp.data;
				} else {
					_this.$message({
						type: 'error',
						message: '数据加载失败!'
					});
				}
			}, resp => {
				_this.loading = false;
				if (resp.response.status == 403) {
					_this.$message({
						type: 'error',
						message: resp.response.data
					});
				} else {
					_this.$message({
						type: 'error',
						message: '数据加载失败!'
					});
				}
			}).catch(resp => {
				//压根没见到服务器
				_this.loading = false;
				_this.$message({
					type: 'error',
					message: '数据加载失败!'
				});
			});
		},
		data() {
			return {
				fpsc: [{
					invoice_id: '',
					no: '',
					name: '',
					date: '',
					invoice_price: '',
					money: ''

				}],
				sum_price_view: '0.00',
				value1: '',
				currentPage: 1,
				pageSize: 7,
				total: 20,
				tableData: [],
				multipleSelection: []
			}
		},
		methods: {
			onSubmit() {
				this.tableData = [];
				let fpscs = this.fpsc;
				let start = parseInt(this.value1[0]);
				let end = parseInt(this.value1[1]);
				let sum_price = 0.00;
				let n = 0;
				fpscs.forEach(item => {
					console.log(item.date);
					let dates = item.date.split('-');
					let date0 = dates[0] + dates[1] + dates[2];
					let date = parseInt(date0);
					if (date >= start && date <= end) {
						this.tableData[n] = item;
						n++;
					}
				})
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.currentPage = 1;
				this.pageSize = val;
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.currentPage = val;
			},
		}
	}
</script>

<style scoped="scoped">
	* {
		main: 0px;
		padding: 0px;
		text-decoration: none;
		list-style: none;
	}

	.el-container {
		/* background-color: #EBEEF5; */
		background-color: white;
	}

	.title {
		height: 45px;
		background-color: #FFFFFF;
		font-family: "微软雅黑";
		font-weight: bold;
	}

	.lv {
		font-size: 13px;
		color: #909399;
		text-align: right;
	}

	.tcon {
		font-size: 20px;
		color: #303133;
		text-align: right;
	}

	.el-table {
		margin: auto;
	}

	.over {}
</style>
